/*
 * @Description: 创建备份计划单弹窗
 * @Author: Rfan
 * @Date: 2022-08-03 20:29:15
 * @LastEditTime: 2022-08-16 10:35:49
 */

import { useEffect, useState } from 'react';
import { Button, Form, Modal } from 'antd';
import PlanForm from './common/PlanForm';
import type { FC } from 'react';
import type { ICommonDialog } from '@/interfaces/global';

interface AddPlanProps extends ICommonDialog {}

const AddPlan: FC<AddPlanProps> = (props) => {
  const { visible, onClose } = props;
  const [form] = Form.useForm();

  useEffect(() => {
    if (visible) {
      setActive(0);
    }
  }, [visible]);

  /**
   * @description: 关闭弹窗
   */
  const onCancel = () => {
    form.resetFields();
    onClose();
  };

  /**
   * @description 提交表单，触发onFinish方法
   */
  const submitFunc = () => {
    form.submit();
    onCancel();
  };
  const [active, setActive] = useState(0);
  const onAdd = () => {
    setActive(active + 1);
  };
  const onDel = () => {
    setActive(active - 1);
  };
  let footer: any[] = [];
  if (active === 0) {
    footer = [
      <Button style={{ display: 'none' }}>上一步</Button>,
      <Button key="close" onClick={onCancel}>
        取消
      </Button>,
      // <Button key="createAdd" type="primary">创建并添加档案</Button>,
      <Button
        key="down"
        type="primary"
        onClick={() => {
          onAdd();
        }}
      >
        下一步
      </Button>
    ];
  }
  if (active === 1) {
    footer = [
      <Button
        key="after"
        type="primary"
        onClick={() => {
          onDel();
        }}
      >
        上一步
      </Button>,
      <Button key="close" onClick={onCancel}>
        取消
      </Button>,
      // <Button key="createAdd" type="primary">创建并添加档案</Button>,
      <Button
        key="down"
        type="primary"
        onClick={() => {
          onAdd();
        }}
      >
        下一步
      </Button>
    ];
  }
  if (active === 2) {
    footer = [
      <Button
        key="after"
        type="primary"
        onClick={() => {
          onDel();
        }}
      >
        上一步
      </Button>,
      <Button key="close" onClick={onCancel}>
        取消
      </Button>,
      // <Button key="createAdd" type="primary">创建并添加档案</Button>,
      <Button
        key="yes"
        type="primary"
        onClick={() => {
          submitFunc();
        }}
      >
        确定添加
      </Button>
    ];
  }
  // console.log(active);
  return (
    <Modal
      title="备份计划"
      visible={visible}
      width={600}
      destroyOnClose
      onCancel={onCancel}
      footer={footer}
    >
      <PlanForm
        form={form}
        visible={visible}
        closeDialog={() => {
          onCancel();
        }}
        active={active}
      />
    </Modal>
  );
};

export default AddPlan;
